{extends file='_base.tpl'}

{block name=content}
<style>
#container {
    display: inline-block;
    position: relative;
    width: 100%;
}
#dummy {
    padding-top: 42%; /* 4:3 aspect ratio */
}
#element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver; /* show me! */
    background-image: url('images/header.jpg');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    /*min-height: 240px;*/
}
</style>



<div id="container">
    <div id="dummy"></div>
    <div class="ui-corner-all ui-shadow" style="padding:50px 0;" id="element">
        <!-- img src="images/header.jpg" class="ui-corner-all" / -->
        <div data-role="controlgroup" data-type="horizontal">
        {foreach $tiposrecurso as $t}
            <a href="departamentos.php?idtipo_recurso={$t['idtipo_recurso']}" data-role="button">
                <img src="images/{$t['icono']}" width="32px"/>
                <br />
                {$t['tipo_recurso_nombre']}
            </a>
        {/foreach}
        </div>
    </div>
</div>

{/block}